<template>
<div class="dashboard-container views-container">
    <div class="dashboard-header">
        <el-row :gutter="8">
            <el-col :span="4">
                <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                    <router-link class="flex-col flex-justify-c flex-align-c pointer" tag="div" :to="{path:'/user/managementAdminUser', query :{ timeArea:formatterTime('day')}}">
                        <div class="item-title">今日新增用户</div>
                        <div class="item-num">
                            <countTo :startVal='0' :endVal='pageIndexData.todayUser' :duration='3000'></countTo>
                        </div>
                    </router-link>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                    <router-link class="flex-col flex-justify-c flex-align-c pointer" tag="div" :to="{path:'/user/managementAdminUser', query :{ timeArea:formatterTime('month')}}">
                        <div class="item-title">本月新增用户</div>
                        <div class="item-num">
                            <countTo :startVal='0' :endVal='pageIndexData.monUser' :duration='3000'></countTo>
                        </div>
                    </router-link>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                    <router-link class="flex-col flex-justify-c flex-align-c pointer" tag="div" :to="{path:'/user/managementAdminUser'}">
                        <div class="item-title">用户总数</div>
                        <div class="item-num">
                            <countTo :startVal='0' :endVal='pageIndexData.allUser' :duration='3000'></countTo>
                        </div>
                    </router-link>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="dashboard-header-item flex-col flex-justify-c flex-align-c ">
                    <router-link class="flex-col flex-justify-c flex-align-c pointer" tag="div" :to="{path:'/platform/managementPlatform', query :{ timeArea:formatterTime('day')}}">
                        <div class="item-title">今日新增平台</div>
                        <div class="item-num">
                            <countTo :startVal='0' :endVal='pageIndexData.todayPlatform' :duration='3000'></countTo>
                        </div>
                    </router-link>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                    <router-link class="flex-col flex-justify-c flex-align-c pointer" tag="div" :to="{path:'/platform/managementPlatform', query :{ timeArea:formatterTime('month')}}">
                        <div class="item-title">本月新增平台</div>
                        <div class="item-num">
                            <countTo :startVal='0' :endVal='pageIndexData.monPlatform' :duration='3000'></countTo>
                        </div>
                    </router-link>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                    <router-link class="flex-col flex-justify-c flex-align-c pointer" tag="div" :to="{path:'/platform/managementPlatform'}">
                        <div class="item-title">平台总数</div>
                        <div class="item-num">{{pageIndexData.allPlatform}}</div>
                    </router-link>
                </div>
            </el-col>
        </el-row>
    </div>

    <div class="home-form" style="margin-top:20px;">
        <div class="home-form-header flex-row flex-justify-b">
            <div class="home-form-header-left">用户概况</div>
            <div class="flex-row flex-align-c">
                <div>
                    <el-radio-group size="mini" v-model="barChartData.params.showType" @change="barChartChange">
                        <el-radio  label="1" border>近7天</el-radio>
                        <el-radio  label="2" border>近30天</el-radio>
                    </el-radio-group>
                </div>
                <el-date-picker @change="barDateChange" :default-time="['00:00:00', '23:59:59']" value-format="timestamp" size="medium" v-model="barChartData.params.time" type="daterange" align="right" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="home-form-content flex-row flex-justify-b" v-loading="barChartData.loading">
            <div class="user-profile-left">
                <v-chart :padding="{ top: 10, right: 20, bottom: 25, left: 80 }" :forceFit="true" :height="barChartData.height" :data="barChartData.barData" :scale="barChartData.scale">
                    <v-tooltip />
                    <v-axis position="bottom" />
                    <v-bar position="year*num" />
                </v-chart>

            </div>
            <div class="user-profile-right">
                <div class="user-profile-right-title">最近新增用户</div>
                <ul>
                    <li class="user-profile-flex" v-for="(item, index) in barChartData.userList" v-if="index < 9" :key="index">
                        <div class="user-profile-right-tag" v-bind:class="{active:index===0||index===1||index===2}">{{index+1}}</div>
                        <div class="user-profile-right-name">{{item.nickname}}</div>
                        <div class="user-create-time">{{item.createtime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- <el-row :gutter="30"> -->
        <!-- <el-col :span="12">
            <div class="home-form" style="margin-bottom:0">
                <div class="home-form-header flex-row flex-justify-b">
                    <div class="home-form-header-left">运营平台占比</div>
                    <el-radio-group v-model="pieChartData.params.operating_type" @change="pieChartChange('left')" size="medium" text-color="#409EFF">
                        <el-radio-button label="0">全部产品</el-radio-button>
                        <el-radio-button label="1">商城</el-radio-button>
                        <el-radio-button label="2">同城</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="home-form-content" v-loading="this.pieChartData.loading.left">
                    <el-row style="margin-left:20px">
                        <el-col :span="8">
                            <div class="dashboard-header-item flex-col flex-justify-c">
                                <div class="item-title">运营平台总数</div>
                                <div class="item-num">{{pieChartData.operatingData.all_operating}}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="dashboard-header-item flex-col flex-justify-c">
                                <div class="item-title">即将到期平台</div>
                                <div class="item-num">{{pieChartData.operatingData.prepare_out}}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="dashboard-header-item flex-col flex-justify-c">
                                <div class="item-title">已到期平台</div>
                                <div class="item-num">{{pieChartData.operatingData.is_overdue}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <v-chart :padding="{ top: 0, right: '35%', bottom: 0, left: 0 }" :theme="theme" :forceFit="true" :height="pieChartData.height" :data="pieChartData.pieIngData.rows" :scale="pieChartData.scale">
                        <v-tooltip :showTitle="false" dataKey="item*percent" />
                        <v-legend :useHtml="pieChartData.useHtml" :containerTpl="pieChartData.containerTpl" :itemTpl="pieChartData.itemTplIng" :itemMarginBottom="20" :offsetX="-50" dataKey="item" position="right-center" />
                        <v-guide :type="pieChartData.guidesIng.type" :position="pieChartData.guidesIng.position" :html="pieChartData.guidesIng.html" :zIndex="pieChartData.guidesIng.zIndex">
                        </v-guide>
                        <v-pie position="percent" color="item" :vStyle="pieChartData.pieStyle" />
                        <v-coord type="theta" :radius="0.8" :innerRadius="0.79" />
                    </v-chart>
                </div>
            </div>
        </el-col> -->
        <!-- <el-col :span="24">
            <div class="home-form" style="margin-bottom:0">
                <div class="home-form-header flex-row flex-justify-b">
                    <div class="home-form-header-left">试用平台占比</div>
                    <el-radio-group v-model="pieChartData.params.operation_type" @change="pieChartChange('right')" size="medium" text-color="#409EFF">
                        <el-radio-button label="0">全部产品</el-radio-button>
                        <el-radio-button label="1">商城</el-radio-button>
                        <el-radio-button label="2">同城</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="home-form-content" v-loading="this.pieChartData.loading.right">
                    <el-row style="margin-left:20px">
                        <el-col :span="12">
                            <div class="dashboard-header-item flex-col flex-justify-c">
                                <div class="item-title">试用平台总数</div>
                                <div class="item-num">{{pieChartData.operationData.all_operation}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="dashboard-header-item flex-col flex-justify-c">
                                <div class="item-title">已到期平台</div>
                                <div class="item-num">{{pieChartData.operationData.is_overdue}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <v-chart :padding="{ top: 0, right: '35%', bottom: 0, left: 0 }" :theme="theme" :forceFit="true" :height="pieChartData.height" :data="pieChartData.pieIonData.rows" :scale="pieChartData.scale">
                        <v-tooltip :showTitle="false" dataKey="item*percent" />
                        <v-axis />
                        <v-legend :useHtml="pieChartData.useHtml" :containerTpl="pieChartData.containerTpl" :itemTpl="pieChartData.itemTplIon" :itemMarginBottom="20" :offsetX="-50" dataKey="item" position="right-center" />
                        <v-pie position="percent" color="item" :vStyle="pieChartData.pieStyle" />
                        <v-guide :type="pieChartData.guidesIon.type" :position="pieChartData.guidesIon.position" :html="pieChartData.guidesIon.html" :zIndex="pieChartData.guidesIon.zIndex">
                        </v-guide>
                        <v-coord type="theta" :radius="0.8" :innerRadius="0.79" />
                    </v-chart>
                </div>
            </div>
        </el-col> -->
    <!-- </el-row> -->

    <div class="home-form" style="margin-top:20px;" v-loading="lineChartData.loading">
        <div class="home-form-header flex-row flex-justify-b">
            <div class="home-form-header-left">平台概况</div>
            <div class="flex-row flex-align-c">
                <div>
                    <el-radio-group size="mini" v-model="lineChartData.params.showType" @change="lineChartChange">
                        <el-radio label="1" border>近7天</el-radio>
                        <el-radio label="2" border>近30天</el-radio>
                    </el-radio-group>
                </div>
                <el-date-picker @change="lineDateChange" value-format="timestamp" :default-time="['00:00:00', '23:59:59']" size="medium" v-model="lineChartData.params.time" type="daterange" align="right" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="home-form-content flex-row">
            <div class="platform-profile-left">
                <div class="flex-col">
                    <div class="platform-profile-left-box flex-col flex-justify-c">
                        <div class="item-title">累计平台总数</div>
                        <div class="item-num-box flex-row flex-align-c">
                            <div class="item-num">{{lineChartData.data.allPlatform}}</div>
                        </div>
                    </div>
                    <div class="platform-profile-left-box flex-col flex-justify-c">
                        <div class="item-title">本月新增平台数</div>
                        <div class="item-num-box flex-row flex-align-c">
                            <div class="item-num">{{lineChartData.data.monthNum}}</div>
                            <!-- <div class="item-num-right flex-row flex-align-c">月环比
                                <div :class="lineChartData.data.monthPercentage>0?'item-icon-top':(lineChartData.data.monthPercentage===0?'item-icon-mid':'item-icon-bottom')"></div>{{lineChartData.data.monthPercentage}}%</div> -->
                        </div>
                    </div>
                    <div class="platform-profile-left-box flex-col flex-justify-c">
                        <div class="item-title">本周新增平台数</div>
                        <div class="item-num-box flex-row flex-align-c">
                            <div class="item-num">{{lineChartData.data.weekNum}}</div>
                            <!-- <div class="item-num-right flex-row flex-align-c">周同比
                                <div :class="lineChartData.data.weekPercentage>0?'item-icon-top':(lineChartData.data.weekPercentage===0?'item-icon-mid':'item-icon-bottom')"></div>{{lineChartData.data.weekPercentage}}%</div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="platform-profile-right">
                <span class="platform-title">平台增长统计</span>
                <v-chart :forceFit="true" :padding="{ top: 20, right: 20, bottom: 25, left: 0 }" :height="lineChartData.height" :data="lineChartData.lineData" :scale="lineChartData.scale">
                    <v-tooltip />
                    <v-axis />
                    <v-line position="day*num" :size="2" shape="smooth" />
                    <v-area position="day*num" shape="smooth" />
                </v-chart>
            </div>
        </div>
    </div>

</div>
</template>

<script>
import Vue from 'vue'
import theme from '@/views/dashboard/walden'
import viserVue from 'viser-vue'
import countTo from 'vue-count-to'
import {
  pageIndex,
  pageSecond,
  pageThree,
  pageFour
} from '@/api/charts'

Vue.use(viserVue)

export default {
  name: 'DashboardAdmin',
  components: {
    countTo
  },
  computed: {

  },
  data() {
    return {
      theme,
      todayUserTimeArea: [],
      pageIndexData: {
        loading: false,
        todayUser: 0,
        monUser: 0,
        allUser: 0,
        todayPlatform: 0,
        monPlatform: 0,
        allPlatform: 0
      },
      pieChartData: {
        loading: {
          left: false,
          right: false
        },
        operatingData: {},
        operationData: {},
        params: {
          operating_type: '0',
          operation_type: '0'
        },
        height: 250,
        useHtml: true,
        containerTpl: '<div class="g2-legend" id="legend-box"><div class="g2-legend-list"></div></div>',
        itemTplIng: (value, color, checked, index) => {
          const {
            count,
            item,
            percent
          } = this.pieChartData.pieIngData.rows[index]
          return '<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}" style="cursor: pointer;font-size: 14px;">' +
                        '<i class="g2-legend-marker" style="width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:10px;background-color: {color};"></i>' +
                        `<span class="g2-legend-text legend-item-name">${item}</span>` +
                        `<span class="g2-legend-text legend-item-percent">${percent.toFixed(2) * 100}%</span>` +
                        `<span class="g2-legend-text legend-item-value">${count}</span>` +
                        '</li>'
        },
        itemTplIon: (value, color, checked, index) => {
          const {
            count,
            item,
            percent
          } = this.pieChartData.pieIonData.rows[index]
          return '<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}" style="cursor: pointer;font-size: 14px;">' +
                        '<i class="g2-legend-marker" style="width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:10px;background-color: {color};"></i>' +
                        `<span class="g2-legend-text legend-item-name">${item}</span>` +
                        `<span class="g2-legend-text legend-item-percent">${percent.toFixed(2) * 100}%</span>` +
                        `<span class="g2-legend-text legend-item-value">${count}</span>` +
                        '</li>'
        },
        pieIngData: this.getPieDataSet({
          source: [{
            item: '运营中',
            count: 0
          },
          {
            item: '即将到期平台',
            count: 0
          },
          {
            item: '已到期平台',
            count: 0
          }
          ]
        }),
        pieIonData: this.getPieDataSet({
          source: [{
            item: '试用中平台总数',
            count: 0
          },
          {
            item: '已到期平台',
            count: 0
          }
          ]
        }),
        guidesIng: {
          type: 'html',
          position: ['50%', '50%'],
          html: `<p class="flex-col flex-align-c flex-justify-c"><span style="font-size: 14px;color: #8c8c8c;font-weight: 300;margin-top:3px;margin-bottom:5px;">运营平台总数</span><span style="color:#000;font-weight:400;font-size:26px;">${45}</span></p>`,
          offsetX: 0,
          offsetY: 0
        },
        guidesIon: {
          type: 'html',
          position: ['50%', '50%'],
          html: `<p class="flex-col flex-align-c flex-justify-c"><span style="font-size: 14px;color: #8c8c8c;font-weight: 300;margin-top:3px;margin-bottom:5px;">试用平台总数</span><span style="color:#000;font-weight:400;font-size:26px;">${45}</span></p>`,
          offsetX: 0,
          offsetY: 0
        },
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1
        },
        scale: [{
          dataKey: 'percent',
          min: 0,
          formatter: '.0%'
        }]
      },
      barChartData: {
        loading: false,
        params: {
          showType: '1',
          starTime: '',
          endTime: '',
          time: []
        },
        userList: [],
        height: 400,
        barData: [],
        scale: [{
          dataKey: 'num',
          tickInterval: 20
        }]
      },
      lineChartData: {
        loading: false,
        data: {},
        params: {
          showType: '1',
          starTime: '',
          endTime: '',
          time: []
        },
        height: 300,
        lineData: [],
        scale: [{
          dataKey: 'value',
          min: 0
        }, {
          dataKey: 'year',
          min: 0,
          max: 1
        }]
      },
      check: '全部产品'
    }
  },
  created() {
    this.$nextTick(() => {
      this.getPageIndex()
      this.getPageSecond()
      // this.getPageThree()
      this.getPageFour()
    //   store.dispatch('setRedirect', false)
    })
  },
  mounted() {

  },
  methods: {
    formatterTime(type = 'day', timeDate = new Date(), format = '{y}-{m}-{d}') {
      let timeArr = []
      const parseTime = require('@/utils').parseTime
      const beiginFloat = new Date(parseTime(timeDate.getTime(), format)).getTime()
      const beforeFloat = new Date(parseTime(timeDate.setTime(timeDate.getTime() - 3600 * 1000 * 24 * 30), format)).getTime() // 月份之前

      switch (type) {
        case 'day':
          timeArr = [beiginFloat, beiginFloat]
          break
        case 'month':
          timeArr = [beforeFloat, beiginFloat]
          break
      }
      return timeArr
    },
    getPageFour() {
      this.lineChartData.loading = true
      pageFour(this.lineChartData.params).then((response) => {
        const res = response.data
        if (res.code === 1) {
          const lineData = res.data.data
          this.lineChartData.data = res.data.situation
          if (typeof this.lineChartData.data.weekPercentage === 'number' && this.lineChartData.data.weekPercentage !== 0) {
            this.lineChartData.data.weekPercentage = this.lineChartData.data.weekPercentage.toFixed(2)
          }
          if (typeof this.lineChartData.data.monthPercentage === 'number' && this.lineChartData.data.monthPercentage !== 0) {
            this.lineChartData.data.monthPercentage = this.lineChartData.data.monthPercentage.toFixed(2)
          }
          const result = []
          Object.keys(lineData).map((item, index) => {
            result.push({
              day: item,
              num: lineData[item]
            })
          })

          this.lineChartData.lineData = result.reverse()
          this.lineChartData.userList = res.data.userList
          this.lineChartData.loading = false
        }
      })
    },
    getPageThree(type = 'all') {
      if (type === 'all') {
        this.pieChartData.loading.left = true
        this.pieChartData.loading.right = true
      } else {
        this.pieChartData.loading[type] = true
      }
      pageThree(this.pieChartData.params).then((response) => {
        const res = response.data
        const {
          all_operating = 0, prepare_out = 0, is_overdue: is_overdueing = 0
        } = this.pieChartData.operatingData = res.data.operating
        const {
          all_operation = 0, is_overdue = 0
        } = this.pieChartData.operationData = res.data.operation

        if (type === 'all' || type === 'left') {
          this.pieChartData.pieIngData = this.getPieDataSet({
            source: [{
              item: `运营中`,
              count: (all_operating - is_overdueing - prepare_out),
              percent: 0
            },
            {
              item: `即将到期平台`,
              count: prepare_out,
              percent: 0
            },
            {
              item: `已到期平台`,
              count: is_overdueing,
              percent: 0
            }
            ]
          })
        }

        if (type === 'all' || type === 'right') {
          this.pieChartData.pieIonData = this.getPieDataSet({
            source: [{
              item: `试用中平台总数`,
              count: (all_operation - is_overdue),
              percent: 0
            },
            {
              item: `已到期平台`,
              count: is_overdue,
              percent: 0
            }
            ]
          })
        }

        this.pieChartData.loading.left = false
        this.pieChartData.loading.right = false
      })
    },
    getPieDataSet(config) {
      const DataSet = require('@antv/data-set')
      const {
        source = [], state = {
          state: {
            count: 0
          },
          watchingStates: ['count']
        }, transform = {
          type: 'percent',
          field: 'count',
          dimension: 'item',
          as: 'percent'
        }
      } = config
      const pieds = new DataSet.View(state)
      const piedv = pieds.source(source)
      piedv.transform(transform)
      return piedv
    },
    // 运营筛选获取数据
    pieChartChange(type) {
      this.getPageThree(type)
    },
    // 试运营筛选获取数据
    pieChartChangeRight() {
      this.getPageThree()
    },
    barChartChange() {
      this.barChartData.params.time = ''
      this.barChartData.params.starTime = ''
      this.barChartData.params.endTime = ''
      this.getPageSecond()
    },
    lineChartChange() {
      this.lineChartData.params.time = ''
      this.lineChartData.params.starTime = ''
      this.lineChartData.params.endTime = ''
      this.getPageFour()
    },
    barDateChange(date) {
      this.barChartData.params.starTime = String(date[0] / 1000)
      this.barChartData.params.endTime = String(date[1] / 1000)
      this.barChartData.params.showType = ''
      this.getPageSecond()
    },
    lineDateChange(date) {
      this.lineChartData.params.starTime = String(date[0] / 1000)
      this.lineChartData.params.endTime = String(date[1] / 1000)
      this.lineChartData.params.showType = ''
      this.getPageFour()
    },
    getPageSecond() {
      this.barChartData.loading = true
      pageSecond(this.barChartData.params).then((response) => {
        const res = response.data
        if (res.code === 1) {
          const barData = res.data.data
          const result = []
          Object.keys(barData).map((item, index) => {
            result.push({
              year: item,
              num: barData[item]
            })
          })
          this.barChartData.barData = result.reverse()
          this.barChartData.userList = res.data.userList
        }
        this.barChartData.loading = false
      })
    },
    getPageIndex() {
      this.pageIndexData.loading = true
      pageIndex().then((response) => {
        const res = response.data
        if (res.code === 1) {
          Object.assign(this.pageIndexData, res.data)
        }
        this.pageIndexData.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    font-size: 14px;

    .platform-title {
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        margin: 20px 0 30px 50px;
    }

    .dashboard-header {
        background: #ffffff;
    }

    .dashboard-header-item {
        height: 130px;

        .item-title {
            font-size: 14px;
            color: #909399;
            margin-bottom: 10px;
        }

        .item-num {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
    }

    .home-form {
        font-weight: 400;
        border-radius: 4px;
        margin-bottom: 20px;
        background: #ffffff;
        min-height: 200px;

        /deep/ .g2-legend {
            &#legend-box {
                max-width: 350px !important;
            }

            .g2-legend-list-item {
                height: 30px;
                margin-bottom: 10px;
                color: rgb(140, 140, 140);
                cursor: pointer;
                margin-bottom: 5px;
                margin-right: 24px;
                font-size: 14px;
                min-width: 250px;
                white-space: nowrap;
                overflow: hidden;

                .g2-legend-text {
                    display: inline-block;
                    white-space: nowrap;
                    margin-left: 15px;
                }

                .legend-item-name {
                    width: 80px;
                    height: 100%;
                    margin-left: 8px;
                    color: #595959;
                    margin-right: 20px;
                    text-align: left;
                }
            }

            .legend-item-percent {
                width: 30px;
                height: 100%;
                margin-left: 10px;
                margin-right: 70px;
                color: #949494;
                text-align: left;
            }

            .legend-item-value {
                font-size: 16px;
                width: 80px;
                height: 100%;
                margin-left: 10px;
                color: #595959;
                text-align: left;
            }
        }

        .el-date-editor {
            margin-left: 20px;
        }

        .home-form-header {
            padding: 20px;
            font-size: 14px;
            border-bottom: 1px solid #f2f2f2;
            padding: 10px 20px;

            /deep/ .el-radio.is-bordered {
                border: none;
            }

            /deep/ .el-radio__input.is-checked+.el-radio__label {
                color: #ffffff;
            }

            /deep/ .el-radio__input {
                display: none;
            }

            /deep/ .el-radio.is-bordered.is-checked {
                background: #409eff;
            }

            /deep/ .el-radio__label {
                padding-left: 0;
            }

            /deep/ .el-radio.is-bordered {
                padding: 6px 10px 0 10px;
            }
        }

        .home-form-content {
            padding: 20px;
            overflow: hidden;
        }

        .home-form-header-left {
            line-height: 36px;
            font-weight: 600;
        }

        .user-profile-right {
            width: 350px;
            padding: 10px;
        }

        .user-profile-left {
            width: 0;
            flex-grow: 1;
            min-height: 400px;
        }

        .user-profile-flex {
            white-space: nowrap;
        }

        .user-profile-right-title {
            display: inline-block;
            font-size: 16px;
            font-weight: 600;
            padding-bottom: 20px;
        }

        .user-profile-right-tag {
            display: inline-block;
            vertical-align: text-top;
            height: 20px;
            width: 20px;
            line-height: 20px;
            border-radius: 20px;
            text-align: center;
            background: #f0f2f5;
            margin: 0 20px 20px 0;
        }

        .user-profile-right-tag.active {
            color: #ffffff;
            background: #314659;
        }

        .user-profile-right-name {
            vertical-align: middle;
            display: inline-block;
            margin-right: 40px;
            width: 75px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .user-create-time {
            vertical-align: middle;
            display: inline-block;
            max-width: 130px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .platform-profile-left {
            width: 20%;
        }

        .platform-profile-right {
            width: 80%;
        }
    }

    .platform-profile-left-box {
        height: 130px;
        width: 280px;
        padding: 0 20px;

        .item-title {
            font-size: 14px;
            color: #909399;
            margin-bottom: 10px;
        }

        .item-icon-top {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 10px solid #f2637b;
            margin: 0 8px;
        }

        .item-icon-mid {
            width: 10px;
            height: 4px;
            background: #fbd437;
            margin: 0 8px;
        }

        .item-icon-bottom {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 10px solid #4ecb73;
            margin: 0 8px;
        }

        .item-num-box {
            width: 240px;
        }

        .item-num {
            font-size: 24px;
            color: #333;
            min-width: 48%;
            font-weight: 600;
        }

        .item-num-right {
            font-size: 14px;
            color: #909399;
        }
    }
}
</style>
